<template>
  <div
    class="chart-block"
    :class="{ 'no-background': !isBackground }"
    :style="{ height: height }"
  >
    <div class="title" :class="titleType" v-if="isTitle">{{ title }}</div>
    <div class="productBtn" v-if="productBtnShow" @click="detailClick(title)">
      <img src="../assets/images/check_detail.png" alt="查看详情" />
      查看详情
      <!--			<span>查看详情</span>-->
    </div>
    <div v-if="optionData.statisticsNumber" class="statistics-number">
      <span>四上企业数量</span
      ><span class="company-number"
        >{{ optionData.statisticsNumber[0].gmysqysl }},</span
      >
      <span>大型企业</span
      ><span class="company-number bigCompany"
        >{{ optionData.statisticsNumber[0].dxgmysqysl }},</span
      >
      <span>中型企业</span
      ><span class="company-number middleCompany"
        >{{ optionData.statisticsNumber[0].zxgmysqysl }},</span
      >
      <span>小型企业</span
      ><span class="company-number smallCompany">{{
        optionData.statisticsNumber[0].xxgmysqysl
      }}</span>
    </div>
    <div class="describe">
      <p>{{ optionData.describe }}</p>
    </div>
    <el-switch
      v-model="switchValue"
      v-if="optionData.isAgriculture"
      @change="switchChange(value)"
      class="switch"
      active-color="#a6cde2"
      inactive-color="#2083b7"
      active-text="牧业"
      inactive-text="农业"
    >
    </el-switch>
    <div v-if="optionData.sort" class="sort">
      <p>
        团场
      </p>
      <p>
        总产量(吨)
        <span class="sort-icon" @click="sortOutputClick">
          <i
            class="arrUp"
            id="outputUp"
            :class="
              activeOutputSort === 'outputUp'
                ? 'sort-top-active'
                : 'sort-top-normal'
            "
          ></i>
          <i
            class="arrDown"
            id="outputDown"
            :class="
              activeOutputSort === 'outputDown'
                ? 'sort-bottom-active'
                : 'sort-bottom-normal'
            "
          ></i>
        </span>
      </p>
      <p>
        播种面积(万亩)
        <span class="sort-icon" @click="sortAreaClick">
          <i
            class="arrUp"
            id="areaUp"
            :class="
              activeAreaSort === 'areaUp'
                ? 'sort-top-active'
                : 'sort-top-normal'
            "
          ></i>
          <i
            class="arrDown"
            id="areaDown"
            :class="
              activeAreaSort === 'areaDown'
                ? 'sort-bottom-active'
                : 'sort-bottom-normal'
            "
          ></i>
        </span>
      </p>
    </div>
    <div
      :id="chartID"
      class="charts-dom"
      :class="{
        'describe-charts-dom': optionData.describe || optionData.sort,
        'statistics-number-charts-dom': optionData.statisticsNumber,
        'no-title-chart': !isTitle,
        'describe-charts-dom-short': describeChartsDomShort,
        'describe-charts-dom-long': describeChartsDomLong,
        'describe-charts-dom-four-long': describeChartsDomfourLong
      }"
    ></div>
  </div>
</template>

<script>
import Vue from "vue";
import eChartsOption from "@/const/eChartsOption";
import echarts from "echarts";

export default {
  name: "chart-block",
  components: {},
  props: {
    chartID: {
      //echarts容器id,建议每个echarts图id唯一,防止渲染bug
      type: String,
      default: ""
    },
    title: {
      //标题文字内容
      type: String,
      default: ""
    },
    height: {
      //容器高度
      type: String,
      default: "28.7vh"
    },
    titleType: {
      type: String, //标题类型，blueSmall,blueBig,greenSmall,greenBig，设计图上有不同颜色和尺寸的，暂时没法切图，等有了图补上样式
      default: "blueSmall"
    },
    optionData: {
      type: Object, //接口传过来的数据
      default: {
        title: "", //图表的标题
        categoryAxis: [], //类目轴数据
        seriesData: [
          {
            name: "", //如果有图例，这个就不能为空
            data: [], //数据
            unit: "" //数据的单位
          }
        ]
      }
    },
    chartType: {
      type: String, //e-chart图类型，用来判断调用哪个方法
      default: ""
    },
    isTitle: {
      type: Boolean,
      default: true
    },
    isBackground: {
      type: Boolean,
      default: true
    },
    productBtnShow: {
      type: Boolean, // 重点产品页面的查看详情按钮
      default: false
    },
    dispatchData: {
      type: Object
    }
  },
  data() {
    return {
      myChart: "",
      option: {},
      switchValue: false,
      describeChartsDomShort: false,
      describeChartsDomLong: false,
      describeChartsDomfourLong: false,
      activeOutputSort: "",
      activeAreaSort: "",
      innerWidth: window.innerWidth
    };
  },
  computed: {},
  created() {
    this.initChart();
  },
  mounted() {
    if (this.optionData.describe && this.optionData.describe.length > 95) {
      this.describeChartsDomfourLong = true;
    } else if (
      this.optionData.describe &&
      this.optionData.describe.length > 60
    ) {
      this.describeChartsDomShort = true;
    } else if (
      this.optionData.describe &&
      this.optionData.describe.length < 34
    ) {
      this.describeChartsDomLong = true;
    } else if (this.optionData.isAgriculture) {
      this.describeChartsDomShort = true;
    }
  },
  methods: {
    initChart() {
      let _this = this;
      // let chart = this.$echarts.init(document.getElementById(this.chartID))
      this.option = {};
      switch (this.chartType) {
        //柱状堆叠图
        case "getStackBar":
          this.option = this.seriesFormatter(
            eChartsOption.getStackBar(this.optionData)
          );
          break;
        //柱状堆叠图
        case "getStackBar02":
          this.option = this.seriesFormatter(
            eChartsOption.getStackBar02(this.optionData)
          );
          break;
        //柱状折线图
        case "getBarAndLine":
          this.option = eChartsOption.getBarAndLine(this.optionData);
          break;
        //单y轴折柱图
        case "getBarLine":
          this.option = eChartsOption.getBarLine(this.optionData);
          break;
        //锥形柱状图
        case "getPictorialBar":
          this.option = eChartsOption.getPictorialBar(this.optionData);
          break;
        //折线图
        case "getLine":
          this.option = this.seriesFormatter(
            eChartsOption.getLine(this.optionData)
          );
          break;
        //新折线图
        case "getNewLine":
          this.option = this.seriesFormatter(
            eChartsOption.getNewLine(this.optionData)
          );
          break;
        //新折线图02
        case "getNewLine02":
          this.option = this.seriesFormatter(
            eChartsOption.getNewLine02(this.optionData)
          );
          break;
        //柱状图
        case "getBar":
          this.option = this.seriesFormatter(
            eChartsOption.getBar(this.optionData)
          );
          break;
        //柱状图--单位相同时，分两个坐标轴显示
        case "getBarDouble":
          this.option = eChartsOption.getBarDouble(this.optionData);
          break;
        //两个柱状叠堆图
        case "getStackBarDouble":
          this.option = eChartsOption.getStackBarDouble(this.optionData);
          break;
        //饼图外发光类型
        case "getPielight":
          this.option = eChartsOption.getPielight(this.optionData);
          break;
        //带阴影的单个折线图
        case "getSingleLine":
          this.option = eChartsOption.getSingleLine(this.optionData);
          console.log(this.option)
          break;
        //块状横向柱状图
        case "getBarBlock":
          this.option = eChartsOption.getBarBlock(this.optionData);
          break;
        //四象限图
        case "getMarkChart":
          this.option = eChartsOption.getMarkChart(this.optionData);
          break;
        //人型横柱状图
        case "getPersonBar":
          this.option = this.seriesFormatter(
            eChartsOption.getPersonBar(this.optionData)
          );
          break;
        //块级柱状图
        case "getBlockLine":
          this.option = eChartsOption.getBlockLine(this.optionData);
          break;
        //水平柱
        case "getshuipingBar":
          this.option = eChartsOption.getshuipingBar(this.optionData);
          break;
        //带边框饼图
        case "getBorderPie":
          this.option = eChartsOption.getBorderPie(this.optionData);
          break;
        //多个圆环图嵌套
        case "getMultiPie":
          this.option = eChartsOption.getMultiPie(this.optionData);
          break;
        //玫瑰图
        case "getRosePie":
          this.option = eChartsOption.getRosePie(this.optionData);
          break;
        //外发光仪表盘
        case "getDashBoardPie":
          this.option = eChartsOption.getDashBoardPie(this.optionData);
          break;
        //锥形图和折线图
        case "getPictorialBarAndLine":
          this.option = eChartsOption.getPictorialBarAndLine(this.optionData);
          break;
        //锥形图和折线图2
        case "getPictorialBarAndLine2":
          this.option = eChartsOption.getPictorialBarAndLine2(this.optionData);
          break;
        //带阴影的折线图
        case "getShadowLine":
          this.option = this.seriesFormatter(
            eChartsOption.getShadowLine(this.optionData)
          );
          break;
        //极坐标柱状图
        case "getpolarBar":
          this.option = eChartsOption.getpolarBar(this.optionData);
          break;
        //横向柱状图
        case "getInfeedBar":
          this.option = eChartsOption.getInfeedBar(this.optionData);
          break;
        //双锥形柱状图
        case "getDoublePictorialBar":
          this.option = eChartsOption.getDoublePictorialBar(this.optionData);
          break;
        // 多列柱状图
        case "getMultiColumnBar":
          this.option = eChartsOption.getMultiColumnBar(this.optionData);
          break;
        // 两个块级柱状图-折线
        case "getDoubleBlockLine":
          this.option = eChartsOption.getDoubleBlockLine(this.optionData);
          break;
        // 横向三角柱状图+飞机
        case "getTransverseBar":
          this.option = eChartsOption.getTransverseBar(this.optionData);
          break;
        // 公司关系图-1
        case "getRelationMap":
          this.option = eChartsOption.getRelationMap(this.optionData);
          break;
        // 公司关系图-2
        case "getRelationMap2":
          this.option = eChartsOption.getRelationMap2(this.optionData);
          break;
        // 带圆角的横向象形柱图
        case "getBarRadiusBlock":
          this.option = eChartsOption.getBarRadiusBlock(this.optionData);
          break;
        // 带圆角的横向象形柱图2
        case "getBarRadiusBlock2":
          this.option = eChartsOption.getBarRadiusBlock2(this.optionData);
          break;
        // 带圆角的横向象形柱图3
        case "getBarRadiusBlock3":
          this.option = eChartsOption.getBarRadiusBlock3(this.optionData);
          break;
        // 双向正负对比图
        case "getTwowayBar":
          this.option = eChartsOption.getTwowayBar(this.optionData);
          break;
        // 横向柱状图-带圆角的象形柱图
        case "getInfeedBarRadius":
          this.option = eChartsOption.getInfeedBarRadius(this.optionData);
          break;
        // 横向柱状图--带圆角带序号的象形柱图
        case "getBarRadiusSerialBlock":
          this.option = eChartsOption.getBarRadiusSerialBlock(this.optionData);
          break;
        // 面积堆叠图
        case "getAreaLine":
          this.option = eChartsOption.getAreaLine(this.optionData);
          break;
        // 带label的柱状图
        case "getBarLable":
          this.option = eChartsOption.getBarLable(this.optionData);
          break;
      }
      // console.log(this.option)
      this.$nextTick(() => {
        this.myChart = this.$echarts.init(
          document.getElementById(this.chartID)
        );
        this.myChart.clear();
        if (this.chartType === "getBarLable") {
          this.myChart.resize();
        }
        this.myChart.setOption(this.option);
        if (this.optionData.lineClick) {
          this.myChart.on("click", param => {
            let seriesName = param.seriesName.split(",");
            let paramName = seriesName[param.dataIndex];
            if (param.name === "棉花") {
              this.$router.push({
                path: "/product/cotton",
                query: { name: param.name }
              });
              this.$store.commit("SET_BREAD2", "棉花现状分析");
            } else {
              if (
                paramName === "水产品" ||
                paramName === "奶类" ||
                paramName === "肉类" ||
                paramName === "水果" ||
                paramName === "油料" ||
                paramName === "粮食"
              ) {
                this.$store.commit("SET_BREAD2", "农产品现状分析");
              } else {
                this.$store.commit("SET_BREAD2", "工业产品现状分析");
              }
              this.$router.push({
                path: "/product/otherProducts",
                query: { name: param.name }
              });
            }
          });
        } else {
          // 关系图谱点击事件
          this.myChart.on("click", { dataType: "node" }, function(params) {
            if (params.value === "1") {
              _this.$emit("ChartClick", params);
            }
          });
          if (this.optionData.pieSelect) {
            // 饼图默认选中
            this.myChart.dispatchAction(this.dispatchData);
            this.myChart.on("mouseover", function(e) {
              _this.$emit("mouseover", e);
            });
            this.myChart.on("mouseout", function(e) {
              _this.$emit("mouseout", e);
            });
          }
        }
        // Vue.prototype.$chartPieEvent = this.myChart
      });
    },
    //不确定series个数，所以这样统一处理；以及图例和单位的处理
    seriesFormatter(option) {
      let unit = this.optionData.seriesData[0].unit;
      this.optionData.seriesData.forEach((data, index) => {
        option.legend.data.push(data.name); //图例
        option.yAxis[0].name = unit;
        if (index > 0) {
          let series = [];
          series = JSON.parse(JSON.stringify(option.series[0]));
          series.name = data.name; //series.name需要与legend对应
          series.data = data.data;
          series.type === "bar" ? (series.showBackground = false) : null; //柱子的背景只要一个，多了会叠加颜色
          if (data.unit !== unit) {
            //通过单位判断有几个Y轴
            option.yAxis[1].name = data.unit;
            series.yAxisIndex = 1;
          }
          //因为有不一样的echarts类型，以及不确定的series个数，对于颜色的处理
          switch (this.chartType) {
            //折线图
            case "getLine":
              series.itemStyle.color = this.optionData.color[index]; //折线图以及折线图圆点的颜色
              series.itemStyle.borderColor = this.optionData.color[index]; //折线图圆点边框颜色
              break;
            case "getNewLine02":
              series.itemStyle.color = this.optionData.color[index]; //折线图以及折线图圆点的颜色
              series.itemStyle.borderColor = this.optionData.color[index]; //折线图圆点边框颜色
              series.lineStyle = {
                type: this.optionData.lineType[index]
              };
              break;
            case "getStackBar02":
              series.stack = this.optionData.seriesData[0].name + Math.random();
              break;
            //新折线图
            case "getNewLine":
              series.itemStyle.color = this.optionData.color[index]; //折线图以及折线图圆点的颜色
              series.itemStyle.borderColor = this.optionData.color[index]; //折线图圆点边框颜色
              // serise.encode = {
              //   x: 'Year',
              //   y: 'Income',
              //   itemName: 'Year',
              //   tooltip: [this.optionData.seriesData[index].name],
              // }
              series.areaStyle = {
                // 阴影
                normal: {
                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: this.optionData.LinearGradientColor[index].topColor
                    },
                    {
                      offset: 1,
                      color: this.optionData.LinearGradientColor[index]
                        .bottomColor
                    }
                  ])
                }
              };
              break;
            //柱状图
            case "getBar":
              series.itemStyle.normal.color.colorStops[0].color = this.optionData.LinearGradientColor[
                index
              ].topColor; //柱状图渐变顶部颜色
              series.itemStyle.normal.color.colorStops[1].color = this.optionData.LinearGradientColor[
                index
              ].bottomColor; //柱状图渐变底部颜色
              break;
            //人型柱状横图
            case "getPersonBar":
              option.yAxis[0].name = "";
              option.xAxis[0].name = data.unit;
              series.symbol = this.optionData.symbol[index];
              if (index == 0) {
                series.z = 3;
              } else if (index == 1) {
                series.z = 2;
                var seriesdata1 = [];
                this.optionData.seriesData[0].data.forEach((data, i) => {
                  seriesdata1.push({
                    value:
                      parseInt(data) +
                      parseInt(this.optionData.seriesData[1].data[i]),
                    last: data
                  });
                });
                series.data = seriesdata1;
              } else if (index == 2) {
                series.z = 1;
                var seriesdata1 = [];
                this.optionData.seriesData[0].data.forEach((data, i) => {
                  seriesdata1.push({
                    value:
                      parseInt(data) +
                      parseInt(this.optionData.seriesData[1].data[i]),
                    last: data
                  });
                });
                var seriesdata2 = [];
                seriesdata1.forEach((data, i) => {
                  seriesdata2.push({
                    value:
                      parseInt(data.value) +
                      parseInt(this.optionData.seriesData[2].data[i]),
                    last: data.value
                  });
                });
                series.data = seriesdata2;
              }
              break;
            case "getShadowLine":
              series.areaStyle.normal.color.colorStops[0].color = this.optionData.LinearGradientColor[
                index
              ].topColor; //柱状图渐变顶部颜色
              series.areaStyle.normal.color.colorStops[1].color = this.optionData.LinearGradientColor[
                index
              ].bottomColor; //柱状图渐变底部颜色
              series.itemStyle.color = this.optionData.LinearGradientColor[
                index
              ].LineCircleColor; //折线图以及折线图圆点的颜色
              series.itemStyle.borderColor = this.optionData.LinearGradientColor[
                index
              ].LineCircleBorderColor; //折线图圆点边框颜色
              break;
          }
          option.series.push(series);
        }
      });
      return option;
    },
    switchChange() {
      if (this.switchValue === true) {
        this.$emit("husbandry", { echarts: "E068", text: "C032" });
      } else {
        this.$emit("husbandry", { echarts: "E067", text: "C031" });
      }
    },
    sortOutputClick(e) {
      if (e.target.id === "outputUp") {
        this.activeOutputSort = "outputUp";
      } else if (e.target.id === "outputDown") {
        this.activeOutputSort = "outputDown";
      }
      this.$emit("sortOutput", this.activeOutputSort);
    },
    sortAreaClick(e) {
      if (e.target.id === "areaUp") {
        this.activeAreaSort = "areaUp";
      } else if (e.target.id === "areaDown") {
        this.activeAreaSort = "areaDown";
      }
      this.$emit("sortArea", this.activeAreaSort);
    },
    detailClick(data) {
      if (data === "棉花产量变化") {
        this.$router.push({ path: "/product/cotton", query: { name: "棉花" } });
        this.$store.commit("SET_BREAD2", "农产品现状分析");
      } else {
        this.$router.push({
          path: "/product/otherProducts",
          query: { name: "原煤" }
        });
        this.$store.commit("SET_BREAD2", "工业产品现状分析");
      }
    }
  },
  watch: {
    optionData: {
      handler() {
        //只能写handler才能生效
        // console.log('watch',this.optionData)
        this.initChart(); //异步调用数据
      },
      deep: true, //深度监听
      immediate: true //immediate设为true后，则监听的这个对象会立即输出，也就是说一刷新页面就会在控制台输出，
    },
    dispatchData: {
      handler() {
        //只能写handler才能生效
        this.myChart.dispatchAction(this.dispatchData);
      },
      deep: true //深度监听
    }
  }
};
</script>

<style scoped lang="scss">
.chart-block {
  width: 100%;
  position: relative;
  // background: rgba(4, 35, 162, 0.08);
  // border: 1px solid  #00E5ED;
  // box-shadow: 0 0 1.51vh rgba(1, 103, 185, 0.5) inset;
  // border: 1px solid #0e7fd6;
  // box-shadow: 0 0 1.51vh rgba(1, 103, 185, 0.5) inset;

  &.no-background {
    background: transparent;
    border: none;
    box-shadow: none;
    .title {
      &.blueSmall {
        background: none;
      }
      &.blueBig {
        background: none;
      }
      &.moreBlueBig {
        background: none;
      }
    }
  }
  .title {
    width: 100%;
    height: 3.98vh;
    margin-top: -1px;
    padding-left: 1vw;
    line-height: 3.98vh;
    color: #ffffff;
    font-size: 0.94vw;
    font-weight: bold;
    text-align: left;

    &.blueSmall {
      // background: url("../assets/images/chart_block_title_blue_sm.png") top center no-repeat;
      background: url("../assets/images/title-bg.png") top center no-repeat;
      background-size: 100% 100%;
    }
    &.blueBig {
      // background: url("../assets/images/chart_block_title_blue_big.png") top center no-repeat;
      background: url("../assets/images/title-bg.png") top center no-repeat;
      background-size: 100% 100%;
    }

    &.moreBlueBig {
      // background: url("../assets/images/chart_block_title_blue_more_big.png") top center no-repeat;
      // background-size: contain;
      background: url("../assets/images/title-bg.png") top center no-repeat;
      background-size: 100% 100%;
    }

    &.greenSmall {
    }

    &.greenBig {
    }
  }

  .productBtn {
    position: absolute;
    top: 4.5vh;
    right: 0;
    display: flex;
    align-items: center;
    width: 5.5vw;
    height: 1.2vw;
    font-size: 0.83vw;
    line-height: 1.2vw;
    color: transparent;
    background: linear-gradient(to bottom, #0cfcff 40%, #0cfcff);
    -webkit-background-clip: text;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
      "微软雅黑", Arial, sans-serif;
    font-weight: bold;
    cursor: pointer;
    z-index: 99999999;

    img {
      height: 1vw;
      margin-right: 0.2vw;
    }

    span {
      font-size: 0.83vw;
      line-height: 1.2vw;
      color: transparent;
      background: linear-gradient(to bottom, #03d3ff 40%, #3cafff);
      -webkit-background-clip: text;
      font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
        "微软雅黑", Arial, sans-serif;
      font-weight: bold;
    }
  }

  .statistics-number {
    background: linear-gradient(
      to right,
      rgba(8, 188, 250, 0.01),
      rgba(8, 188, 250, 0.18),
      rgba(8, 188, 250, 0.01)
    );
    color: #ffffff;
    text-align: center;
    font-size: 0.8vw;
    margin-top: 0.8vh;
    height: 3vh;
    white-space: nowrap;
    line-height: 3vh;
    font-family: "Microsoft YaHei";

    .company-number {
      font-weight: bold;
      // padding-left: 0.1vw;
    }

    .bigCompany {
      color: #32e9f4;
    }

    .middleCompany {
      color: #f1db25;
    }

    .smallCompany {
      color: #fc684b;
    }
  }

  .describe {
    width: 80%;
    margin: 1vh 0 1vh 10%;
    color: #e7fffc;
    padding: 0.1vw 0.5vw;
    font-size: 0.8vw;
  }

  .sort {
    color: #fff;
    display: flex;
    justify-content: space-between;
    width: 87%;
    margin-left: 13%;
    align-items: center;
    height: 3vh;
    font-size: 0.83vw;

    .sort-icon {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      height: 3vh;
      width: 1vw;
      vertical-align: middle;
      cursor: pointer;
      overflow: initial;
      position: relative;
    }

    .arrUp {
      width: 0;
      height: 0;
      border: 0.29vw solid transparent;
      border-bottom-color: #808da6;
      cursor: pointer;
    }

    .arrDown {
      width: 0;
      height: 0;
      border: 0.29vw solid transparent;
      border-top-color: #808da6;
      margin-top: 0.3vh;
      cursor: pointer;
    }

    .sort-top-active {
      border-bottom-color: #fff;
    }

    .sort-top-normal {
      border-bottom-color: #808da6;
    }

    .sort-bottom-active {
      border-top-color: #fff;
    }

    .sort-bottom-normal {
      border-top-color: #808da6;
    }
  }

  .charts-dom {
    width: 100%;
    height: calc(100% - 3.98vh);
  }

  .statistics-number-charts-dom {
    width: 100%;
    height: calc(100% - 7.78vh);
  }

  .describe-charts-dom {
    width: 100%;
    height: calc(100% - 11vh);
  }

  .describe-charts-dom-short {
    width: 100%;
    height: calc(100% - 11vh);
  }

  .describe-charts-dom-four-long {
    width: 100%;
    height: calc(100% - 13vh);
  }

  .describe-charts-dom-long {
    width: 100%;
    height: calc(100% - 7vh);
  }

  .no-title-chart {
    width: 100%;
    height: 100%;
  }
}
</style>
<style lang="scss">
.chart-block {
  .el-switch__label {
    color: #ffffff;
    font-size: 0.8vw;
  }

  .el-switch__label * {
    font-size: 0.7vw;
  }

  .el-switch.is-checked .el-switch__core {
    background: #2083b7 !important;
    border-color: #2083b7 !important;
  }

  .switch {
    //float: right;
    //z-index: 100;
    //margin-top: -2.5vh;
    //margin-right: 0.2vw;
    position: absolute;
    top: 1.99vh;
    right: 0.5vw;
    margin-top: -10px;
  }

  .el-switch__label--left {
    margin-right: 0.3vw;
  }

  .el-switch__label--right {
    margin-left: 0.3vw;
  }

  .el-switch__core {
    width: 1.8vw !important;
    height: 1.8vh;
  }

  .el-switch.is-checked .el-switch__core::after {
    left: 100%;
    margin-left: -0.9vw;
  }

  .el-switch__core:after {
    top: 0;
    left: 0;
    width: 0.9vw;
    height: 1.65vh;
  }
}
</style>
